<template>
  <div class="seller-layout">
    <!-- 左侧导航栏 -->
    <SellerSidebar :activeItem="activeMenuItem" @nav-change="handleNavChange" />
    
    <!-- 右侧主要内容区域 -->
    <div class="main-content">
      <router-view />
    </div>
  </div>
</template>

<script>
import SellerSidebar from '@/components/SellerSidebar.vue'

export default {
  name: 'SellerLayout',
  components: {
    SellerSidebar
  },
  computed: {
    // 根据当前路由确定激活的菜单项
    activeMenuItem() {
      const path = this.$route.path
      if (path.includes('info')) {
        return 'info'
      } else if (path.includes('product')) {
        return 'product'
      } else if (path.includes('order')) {
        return 'order'
      } else if (path.includes('category')) {
        return 'category'
      } else if (path.includes('analytics')) {
        return 'analytics'
      }
      return 'product' // 默认激活商品管理
    }
  },
  methods: {
    handleNavChange(item) {
      // 导航变化处理，这里可以添加额外的逻辑
      console.log('导航切换到:', item)
    }
  }
}
</script>

<style scoped>
.seller-layout {
  display: flex;
  height: 100vh;
  width: 100vw;
  background-color: #f0f2f5;
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-content {
    margin-left: 200px; /* 移动端SellerSidebar的宽度 */
    padding: 15px;
  }
}

@media (max-width: 480px) {
  .seller-layout {
    flex-direction: column;
  }
  
  .main-content {
    margin-left: 0;
    padding: 10px;
  }
}
</style>